<template>
    <div>
        <!-- 面板数据 -->
        <div class="py-10px bg-#3f3f3f flex">
            <div style="border-right: 1px solid #555555;" class="py-7px">
                <div class="flex bg-#343434 px-12px gap-12px">
                    <span class="text-12px font-bold">- 今日数据</span>
                    <span class="text-9px">每15分钟刷新一次最新数据</span>
                </div>
                <div>
                    <div class="flex justify-between pl-20px pr-12px my-10px">
                        <span class="text-12px">今日点击:</span>
                        <span class="text-24px font-bold">7777</span>
                    </div>
                    <div class="flex justify-between pl-20px pr-12px">
                        <span class="text-12px">今日下载:</span>
                        <span class="text-24px font-bold">888</span>
                    </div>
                </div>
            </div>
            <div class="pl-16px flex flex-col justify-between py-7px">
                <div class="flex items-center gap-9px">
                    <img src="../images/panel.webp" alt="" class="w-23px">
                    <span class="text-9px">累计点击</span>
                    <span class="text-15px font-bold">7899K</span>
                </div>
                <div class="flex items-center gap-9px">
                    <img src="../images/success.webp" alt="" class="w-23px">
                    <span class="text-9px">累计好评</span>
                    <span class="text-15px font-bold">99%</span>
                </div>
                <div class="flex items-center gap-9px">
                    <img src="../images/download.webp" alt="" class="w-23px">
                    <span class="text-9px">累计下载</span>
                    <span class="text-15px font-bold">7899K</span>
                </div>
            </div>
        </div>
        <div class="px-12px py-10px">
            <div class="text-12px font-bold mb-10px">- 数据记录</div>
            <div>
                <nut-input v-model="searchDate.gameName" class="rounded-full h-30px">
                    <template #right>
                        <TriangleDown color="#1c1c1c" size="8px" />
                    </template>
                </nut-input>
                <nut-input v-model="searchDate.startDate" class="rounded-full mt-13px h-30px nut-center">
                    <template #right>
                        <TriangleDown color="#1c1c1c" size="8px" />
                    </template>
                </nut-input>
                <div class="my-6px text-12px text-#bfbfbf text-center lh-12px">至</div>
                <nut-input v-model="searchDate.endDate" class="rounded-full h-30px nut-center">
                    <template #right>
                        <TriangleDown color="#1c1c1c" size="8px" />
                    </template>
                </nut-input>
                <div class="my-18px text-center">
                    <nut-button class="!w-173px !h-30px !bg-#d961b2 !border-none !text-#fff !text-12px">查询</nut-button>
                </div>
            </div>

            <div class="h-334px bg-#3f3f3f rounded-10px"></div>
            <div class="my-18px text-center">
                <nut-button class="!w-173px !h-30px !bg-#d961b2 !border-none !text-#fff !text-12px">返回上一层</nut-button>
            </div>
        </div>

    </div>
</template>


<script lang="ts" setup>
import { ref } from 'vue';
import { TriangleDown } from '@nutui/icons-vue'

const searchDate = ref({
    gameName: '全部游戏',
    startDate: '2025-01-01',
    endDate: '2025-01-01',
})
</script>

<style scoped lang="scss">
:deep(.nut-input) {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 12px;
    padding-right: 12px;
    line-height: 30px;
}

:deep(.nut-center) {
    input {
        text-align: center !important;
    }
}
</style>